<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import FormBase from './FormBase.vue'
  import TemplateJigsaw from '../template/TemplateJigsaw.vue'


  const init_text = $.loc.form.jigsaw_drag_right

  export default {
    name: 'w-jigsaw',
    mixins: [FormBase],
    emits: ['drop', 'click:refresh'],
    props: ['big', 'small', 'dropWidth'],
    data() {
      return {
        hasBorder: true,
        text: init_text,
        locked: false,
        isSuccess: false,
        isError: false,
        dropper: null,
      }
    },
    methods: {
      success(text) {
        this.text = text
        this.locked = true
        this.isSuccess = true
        this.setThumbLeft()
      },
      error(text, timeout, fn) {
        if (!text) text = ''
        this.isError = true
        this.warn(true)
        this.setThumbLeft(0)
        if (timeout) {
          this.locked = true
          this.text = text + `(${timeout/1000})`
          let timer = setInterval(() => {
            timeout -= 1000
            this.text = text + `(${timeout/1000})`
            if (timeout <= 0) {
              clearInterval(timer)
              this.reset()
              fn && fn()
            }
          }, 1000)
        } else {
          fn && fn()
        }
      },
      reset() {
        this.locked = false
        this.isError = false
        this.isSuccess = false
        this.text = init_text
        this.setThumbLeft(0)
      },
      refresh(e) {
        e.runType = 'click:refresh'
        this.trigger(e)
      },
      setThumbLeft(left) {
        if (left == null) {
          left = $.number(this.$refs.thumb.style.left)
        } else {
          this.$refs.thumb.style.left = left + 'px'
        }
        let g = this.thumbWidth()
        let w = this.mainWidth()
        let hf = (left + (g / 2)) > (w / 2)
        this.$refs.text.style.left = hf ? 0 : (left + g) + 'px'
        this.$refs.text.style.right = hf ? (w - left) + 'px' : 0
        this.el().classList.remove('z-drag')
        $.close(this.dropper)
      },
      dragstart(e) {
        if (!this.isNormal || this.locked) return
        this.warn(false)
        let a = this.$refs.thumb
        let x = $.eventX(e)
        let m = this.max()
        let n = this.min()
        let f = $.number(a.style.left)
        let g = this.thumbWidth()
        let w = this.mainWidth()
        $.moveup((e) => {
          let c = $.eventX(e)
          let l = $.numRange(f + c - x, 0, w - g)
          a.style.left = l + 'px'
          this.$refs.track.style.width = (l + g) + 'px'
          this.x.modelValue = Math.floor(Math.floor((m - n) * l / (w - g)))
          this.el().classList.add('z-drag')
        }, (e) => {
          a.dispatchEvent(new Event('drop'))
        }, e)
      },
      mouseenter(e) {
        if (this.dropper || !this.x.big || this.isSuccess || this.locked) return
        this.warn(false)
        $.closePopup()
        let width = Math.max($.number(this.x.dropWidth), $.bcr(this.el('main')).width)
        let height = Math.ceil(width * (this.x.big.height / this.x.big.width))
        this.dropper = this.cmd({
          type: 'Dialog',
          ownproperty: true,
          template: TemplateJigsaw,
          width,
          height,
          autoHide: true,
          hoverDrop: true,
          context: this,
          snap: {
            target: () => this.el('main'),
            position: 'v'
          },
          on: {
            close: () => this.dropper = null
          }
        })
      },
      drop(e) {
        this.trigger(e, this.x.modelValue)
      },
      max() {
        let v = this.x.maxValue
        return v == null ? 100 : v
      },
      min() {
        let v = this.x.minValue
        return v == null ? 0 : v
      },
      thumbWidth() {
        return $.bcr(this.$refs.thumb).width
      },
      mainWidth() {
        return $.bcr(this.$refs.main).width
      },
      html_input() {
        return [
          this.html_input_hidden(), ,
          [
            h('div', {
              ref: 'track',
              class: 'w-jigsaw-track',
            }),
            h('div', {
              ref: 'text',
              class: 'w-jigsaw-text f-flex-center f-line-1',
            }, this.text),
          ]
        ]
      },
      html_button() {
        return h('button', {
          ref: 'thumb',
          class: ['w-jigsaw-thumb w-input-bbr f-i', this.isSuccess ? 'f-i-check' :
            'f-i-long-arrow-right'
          ],
          disabled: this.x.disabled,
          onmousedown: this.dragstart,
          ondrop: this.drop,
        })
      }
    },
    computed: {
      validHooks() {
        return {
          ...this.pubValidHooks,
          validateDefault: (v) => {
            if (!this.isSuccess) {
              return this.formErr({type: 'jigsaw_required'})
            }
          }
        }
      },
      html_class() {
        return {
          'z-success': this.isSuccess,
        }
      },
      main_prop() {
        return {
          onmouseenter: this.mouseenter
        }
      }
    }
  }
</script>

<style>
  .w-jigsaw>.w-input {
    position: relative;
    background: #f8f8f8;
    overflow: visible;
    border-color: #ddd;
  }

  .w-jigsaw-thumb {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
    background: #fff;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  }

  .w-jigsaw-thumb:hover,
  .w-jigsaw.z-drag .w-jigsaw-thumb {
    background: var(--w--focus-color);
    color: #fff;
  }

  .w-jigsaw-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    right: 0;
    color: #a9a9a9;
  }

  .w-jigsaw-track {
    display: none;
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    background: #e5f3ff;
    border: 1px solid transparent;
  }


  .w-jigsaw.z-drag .w-jigsaw-text {
    display: none;
  }

  .w-jigsaw.z-drag .w-jigsaw-track {
    display: block;
    border-color: var(--w--focus-color);
  }

  .w-jigsaw.z-success .w-jigsaw-track {
    display: block;
    background: #eaffe5;
    border-color: #24c301;
  }

  .w-jigsaw.z-success .w-jigsaw-thumb {
    background: #24c301;
    color: #fff;
  }

  .w-jigsaw.z-success .w-jigsaw-text {
    color: #24c301;
  }

  .w-jigsaw.z-err .w-jigsaw-text {
    color: #f00;
  }
</style>
